import CommonConfig from '@config/Common';
import FoodConfig from '@config/Food';

// 蛇的类
class Snake {
    element: HTMLElement;               // 蛇的元素
    head: HTMLElement;                  // 蛇头元素
    bodies: HTMLCollectionOf<HTMLElement>;             // 蛇身元素

    constructor() {
        this.element = document.querySelector('#snake')!;
        this.head = document.querySelector('#snake > div')!;
        this.bodies = this.element.getElementsByTagName('div');

        this.change();
    }

    change() {
        // 将屏幕分成几个部分
        const part = (CommonConfig.stageWidth - FoodConfig.width) / CommonConfig.baseMove;

        // 更新蛇头的位置
        this.head.style.left = Math.round(Math.random() * part) * CommonConfig.baseMove + 'px';
        this.head.style.top = Math.round(Math.random() * part) * CommonConfig.baseMove + 'px';
    }

    get X() {
        return this.head.offsetLeft;
    }

    get Y() {
        return this.head.offsetTop;
    }

    set X(value: number) {
        if(this.X === value) {
            return;
        }

        //如果蛇调头，保持原来的方向运动
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {
            if(value < this.X) {
                value = this.X + CommonConfig.baseMove;
            } else {
                value = this.X - CommonConfig.baseMove;
            }
        }

        // 蛇撞墙的处理
        if(value < 0 || value > 290) {
            throw new Error('蛇撞墙了');
        }

        // 移动蛇身
        this.moveBody();

        this.head.style.left = value + 'px';

        // 是否撞到身体
        this.checkHitBody();
    }

    set Y(value: number) {
        if(this.Y === value) {
            return;
        }

        //如果蛇调头，保持原来的方向运动
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
            if(value < this.Y) {
                value = this.Y + CommonConfig.baseMove;
            } else {
                value = this.Y - CommonConfig.baseMove;
            }
        }

        // 蛇撞墙的处理
        if(value < 0 || value > 290) {
            throw new Error('蛇撞墙了');
        }

        // 移动蛇身
        this.moveBody();

        this.head.style.top = value + 'px';

        // 是否撞到身体
        this.checkHitBody();
    }

    // 添加蛇身
    addBody() {
        this.element.insertAdjacentHTML("beforeend", '<div></div>');
    }

    // 控制蛇身移动
    moveBody() {
        for(let i = this.bodies.length - 1; i > 0; i--) {
            // 获取前一个蛇身小方块的位置
            const X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
            const Y = (this.bodies[i - 1] as HTMLElement).offsetTop;

            // 更新当前小方块的位置
            (this.bodies[i] as HTMLElement).style.left = X + 'px';
            (this.bodies[i] as HTMLElement).style.top = Y + 'px';
        }
    }

    // 是否撞到身体
    checkHitBody() {
        for(let i = 1; i < this.bodies.length; i++) {
            if(this.bodies[i].offsetTop === this.Y && this.bodies[i].offsetLeft === this.X) {
                throw new Error('撞到身体了！！');
            }
        }
    }
}

export default Snake;